<template>
	<view v-if="is_init">
		<uni-popup-input name="图标" @close="on_close">
			<view class="">
				<view class="  bg-white">
					<view class="banmi_flex a-c">
						<view class="  banmi_flex a-c">
							<view class="" style="width: 40%;">
								<uni-easyinput v-model="keyword" placeholder="图标名称" confirm-type="search"
									@confirm="on_keyword">
								</uni-easyinput>
							</view>
							<view class="p-l-r-10 banmi_flex">
								<button @click="on_keyword" type="primary"
									style="background-color: #007AFF;width: 60px;" size="mini">查询</button>
								<button class="m-l-10" @click="on_keyword_all" type="primary"
									style="background-color: #007AFF;width: 60px;" size="mini">重置</button>
							</view>
						</view>
					</view>
					<view class="p-10">
						<text class="cred">图标只适用后台管理系统</text>
						<text class="m-l-10 cred">图标免费可商用-来源：https://iconpark.oceanengine.com/</text>
					</view>
					<view class="">
						<view class="  bm-classify">
							<view v-for="(item,index) in list" :key="index" class="banmi_flex j-c"
								:style="is_mounted==1? 'width: 100px;height: 90px;' : 'width: 100px;height: 140px;' ">
								<view class="t-c">
									<view class="banmi_flex j-c ">
										<icon-park class="icon-color banmi_flex a-c" :type="item.icon" theme="outline"
											style="font-size: 60rpx;" />
									</view>

									<view class="f-14  c-7">
										{{item.name}}
									</view>

									<button v-if="is_mounted==0" @click="on_copy(item.icon)"
										class="f-14  c-7  p-t-b-10">
										<text class="button-color">复制icon</text>
									</button>
									<button v-if="is_mounted==0" class="f-14  c-7  " @click="on_html(item.icon)">
										<text class="button-color">复制代码</text>
									</button>

									<button v-if="is_mounted==1" class="f-14  c-7  " @click="on_ok(item.icon)">
										<text class="button-color">选择</text>
									</button>

								</view>
							</view>
						</view>
						<view style="margin-bottom: 100rpx;">
							<uni-pagination @change="getPage" show-icon="true" :pageSize="100" :total="total"
								current="1" style="float: left;margin-bottom: 10px;"></uni-pagination>
						</view>
					</view>

				</view>
			</view>

		</uni-popup-input>


	</view>
</template>

<script>
	import {
		IconPark
	} from '@icon-park/vue/es/all';
	export default {
		components: {
			IconPark,
		},
		props: {
			is_mounted: {
				type: Number,
				default () {
					return 0;
				}
			},

		},
		data() {
			return {
				menu_list: [{
						"id": 0,
						"name": "平台管理",
					},

				],
				nav_index: 0,
				name: '',
				list: [],
				windowWidth1: 0,
				windowHeight: 0,
				id: 0,
				total: 0,
				keyword: '',
				is_init: false,
			}
		},

		methods: {
			on_ok(icon) {

				this.$emit('confirm', icon)
				this.on_close();
			},
			on_copy(name) {
				uni.setClipboardData({
					data: name,
					success: function() {
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			},
			on_html(name) {
				var name = '<icon-' + name + ' size="40" color="#333" >' + '</icon-' + name + '>'
				this.on_copy(name)
			},

			img_ok() {
				this.init()
			},
			getPage(id) {
				this.page = id.current;
				this.init()
			},
			on_keyword_all() {
				this.keyword = '';
				this.page = 1;
				this.init();
			},
			on_keyword() {
				if (!this.keyword) {
					uni.showToast({
						title: '请输入搜索词',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '搜索中'
				})
				this.page = 1;
				this.init();
			},
			async init() {
				var that = this;

				let requestParams = {
					page: this.page,
					keyword: this.keyword
				}
		 
				const ret = await this.Banmikeji.Iconpark_index(requestParams);
				uni.hideLoading()
				if (ret.status == 200) {
					this.list = ret.data.list.data;
					this.total = ret.data.list.total;
					this.is_init = true;

				}

			},
			on_close() {
				this.find = {}
				this.is_init = false;
			},
		}
	}
</script>

<style>
	button::after {
		border: none;
	}

	button {
		background-color: unset;
		padding: 0;

	}
</style>